<template>
  <a-tabs class="bgc-white">
    <a-tab-pane key="用工单位" tab="用工单位">
      <a-spin :spinning="spinning" class="body_detail page-miH page-bgBack">
        <a-row type="flex" justify="space-between" class="company">
          <a-col><a-icon type="left" class="mg_r20" @click="$router.go(-1)" /> {{ editor ? "用工单位详情" : "添加用工单位" }}</a-col>
          <a-col v-if="editor">
            <a-button class="mg_r20" @click="editorDetail">{{ disabled ? "编辑" : "取消" }}</a-button>
            <a-button @click="deleteEmp">删除用工单位</a-button>
          </a-col>
        </a-row>
        <div class="base_detail">
          <span class="font-14px-3333">基本信息</span>
        </div>
        <template>
          <a-form :form="form">
            <a-row style="width: 900px; margin: 0 auto">
              <a-col :span="12">
                <a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="单位名称">
                  <a-input
                    v-decorator="['name', { rules: [{ required: true, message: '单位名称必填' }] }]"
                    :disabled="disabled"
                    placeholder="请输入"
                    style="width: 260px"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="所属分组">
                  <a-tree-select
                    v-decorator="['groupIds', { rules: isRequired ? [{ required: true, message: '所属分组必选' }] : [] }]"
                    :treeData="groupTree"
                    :disabled="disabled"
                    :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                    treeNodeFilterProp="title"
                    treeCheckStrictly
                    treeCheckable
                    placeholder="请输入"
                    style="width: 260px"
                    @change="onGroupIdsChange"
                  />
                </a-form-item>
              </a-col>
              <!-- 管理员已隐藏 -->
              <a-col :span="12">
                <a-form-item v-show="!isShow" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="联系人姓名">
                  <a-input v-decorator="['legalPerson']" :disabled="disabled" placeholder="请输入" style="width: 260px" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item v-show="!isShow" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="联系电话">
                  <a-input
                    v-decorator="[
                      'telephone',
                      {
                        rules: [
                          {
                            required: false,
                            message: '手机号必填'
                          },
                          {
                            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
                            message: '请输入11位数字类型手机号码'
                          }
                        ]
                      }
                    ]"
                    :disabled="disabled"
                    style="width: 260px"
                    :max-length="11"
                    placeholder="请输入"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item v-show="!isShow" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="客户级别">
                  <a-input v-decorator="['clientLevel']" :disabled="disabled" placeholder="请输入" style="width: 260px" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item v-show="!isShow" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="客户专属响应电话">
                  <a-input
                    v-decorator="[
                      'clientPhone',
                      {
                        rules: [
                          {
                            required: false,
                            message: '手机号必填'
                          },
                          {
                            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
                            message: '请输入11位数字类型手机号码'
                          }
                        ]
                      }
                    ]"
                    :disabled="disabled"
                    style="width: 260px"
                    :max-length="11"
                    placeholder="请输入"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item v-show="!isShow" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="联系邮箱">
                  <a-input
                    v-decorator="[
                      'email',
                      {
                        rules: [
                          {
                            pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
                            message: '请输入正确的邮箱格式'
                          }
                        ]
                      }
                    ]"
                    :disabled="disabled"
                    placeholder="请输入"
                    style="width: 260px"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item v-show="!isShow" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="单位规模">
                  <a-select
                    v-decorator="['personSize']"
                    :disabled="disabled"
                    style="width: 260px"
                    :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                    @change="handleChange"
                  >
                    <a-select-option v-for="item in person" :key="item" :value="item">{{ item }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item v-show="!isShow" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="所在行业">
                  <a-select
                    v-decorator="['industry']"
                    :disabled="disabled"
                    style="width: 260px"
                    :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                    @change="handleChange"
                  >
                    <a-select-option v-for="item in industry" :key="item" :value="item">{{ item }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item v-show="!isShow" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="上传合同">
                  <a-upload
                    v-decorator="['serverAnnex', { rules: [{ required: isRequired, message: '必须上传合同' }] }]"
                    multiple
                    :fileList="fileListTemp"
                    :disabled="disabled"
                    :showUploadList="{ showPreviewIcon: true, showRemoveIcon: !(editor && disabled) }"
                    action="/file/api/v1/general/upload/inline"
                    name="files"
                    @preview="previewFile"
                    @change="onUploadChange"
                  >
                    <div
                      v-if="!disabled"
                      class="ta-center br4 p12"
                      style="border: 1px dashed var(--primary); cursor: pointer; width: 260px"
                    >
                      <div><a-icon type="plus-circle" theme="filled" style="color: var(--primary); font-size: 24px" /></div>
                      <div style="color: var(--primary)">上传材料</div>
                      <div class="ta-left mt4" style="color: rgba(118, 120, 133, 1)">
                        支持doc，ppt，pdf，jpg，png等格式文件，文件不得超过20M。
                      </div>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item v-show="!isShow" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="备注">
                  <a-textarea
                    v-decorator="['profile']"
                    :disabled="disabled"
                    placeholder="请输入"
                    style="width: 260px"
                    :autoSize="{ minRows: 4, maxRows: 4 }"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </template>
        <div v-if="!editor" style="text-align: center">
          <div class="but-open-show" @click="isShow = !isShow">
            {{ isShow ? "更多" : "收起" }}
            <a-icon :type="isShow ? 'down' : 'up'" style="margin-left: 5px" />
          </div>
        </div>
        <div v-if="!isJF" class="base_detail">
          <span class="font-14px-3333">合同信息</span>
        </div>
        <ContractFrom
          v-if="!isJF"
          ref="ContractFrom"
          :value="contractFormValues"
          :companyId="$route.query.id"
          :disabled="disabled"
          :isRequired="isRequired"
        />
        <div v-if="!isJF" class="base_detail">
          <span class="font-14px-3333">费用结算</span>
        </div>
        <FeeForm
          v-if="!isJF"
          ref="FeeForm"
          :value="feeFormValues"
          :companyId="$route.query.id"
          :disabled="disabled"
          :isRequired="isRequired"
        />
        <div v-if="!isJF" class="base_detail">
          <span class="font-14px-3333">高级配置</span>
        </div>
        <a-form v-if="!isJF" :form="formHigh">
          <div style="display: flex; justify-content: space-between; padding: 0 15% 0 12%">
            <a-form-item style="min-width: 500px" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="参保方案设置">
              <div class="ellipsis" style="width: 260px" v-if="editor">{{ socProg ? socProg : "--" }}</div>
              <a-select
                v-else
                mode="multiple"
                style="width: 260px"
                placeholder="请选择"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                v-decorator="[
                  'socProgsIds',
                  {
                    rules: [
                      {
                        required: false,
                        message: '请选择参保方案'
                      }
                    ]
                  }
                ]"
                :disabled="disabled"
              >
                <a-select-option v-for="(item, index) in socData" :key="index" :value="item.id">
                  {{ item.progName }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item style="min-width: 500px" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="合同模板">
              <div class="ellipsis" style="width: 260px" v-if="editor">{{ category ? category : "--" }}</div>
              <a-tree-select
                v-else
                :disabled="disabled"
                style="width: 260px"
                :tree-data="contractData"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                tree-checkable
                :replaceFields="replaceFields"
                :show-checked-strategy="SHOW_PARENT"
                v-model="contractDefaultValue"
                placeholder="请选择合同模板"
              />
              <a-checkbox v-model="isSeal" v-if="!editor" :disabled="!contractDefaultValue.length"> 是否同步下发印章 </a-checkbox>
            </a-form-item>
          </div>
          <div style="display: flex; justify-content: space-between; padding: 0 15% 0 12%">
            <a-form-item style="min-width: 500px" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="工资表模板">
              <div class="ellipsis" style="width: 260px" v-if="editor">{{ salaryTemplate ? salaryTemplate : "--" }}</div>
              <a-select
                v-else
                mode="multiple"
                style="width: 260px"
                placeholder="请选择"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                v-decorator="[
                  'salaryTemplateIds',
                  {
                    rules: [
                      {
                        required: false,
                        message: '请选择工资表模板'
                      }
                    ]
                  }
                ]"
                :disabled="disabled"
              >
                <a-select-option v-for="(item, index) in templateData" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item style="min-width: 500px" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }" label="合同印章">
              <div style="display: flex; align-items: center">
                <div class="ellipsis" style="width: 260px" v-if="editor">{{ seal ? seal : "--" }}</div>
                <a-select
                  v-else
                  mode="multiple"
                  style="width: 260px"
                  placeholder="请选择"
                  :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                  v-decorator="[
                    'sealsIds',
                    {
                      rules: [
                        {
                          required: false,
                          message: '请选择合同印章'
                        }
                      ]
                    }
                  ]"
                  :disabled="disabled"
                >
                  <a-select-option v-for="(item, index) in sealData" :disabled="item.status !== 1" :key="index" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
                <a-popover placement="top" v-if="!editor">
                  <template slot="content">
                    <span style="font-size: 12px">未认证的印章不支持下发</span>
                  </template>
                  <a-icon style="cursor: pointer; color: #bebebe; margin-left: 12px" type="question-circle" theme="filled" />
                </a-popover>
              </div>
            </a-form-item>
          </div>
          <div style="display: flex; justify-content: space-between; padding: 0 15% 0 12%">
            <a-form-item style="min-width: 500px" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="工价规则">
              <div class="ellipsis" style="width: 260px" v-if="editor">{{ GJrules ? GJrules : "--" }}</div>
              <a-select
                v-else
                mode="multiple"
                show-search
                placeholder="请选择规则"
                option-filter-prop="children"
                style="width: 260px"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                v-decorator="[
                  'wagesRules',
                  {
                    rules: [
                      {
                        required: false,
                        message: '请选择工价规则'
                      }
                    ]
                  }
                ]"
              >
                <a-select-option v-for="(item, index) in wageList" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item style="min-width: 500px" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="招工劳务费规则">
              <div class="ellipsis" style="width: 260px" v-if="editor">{{ LWFrules ? LWFrules : "--" }}</div>
              <a-select
                v-else
                mode="multiple"
                show-search
                placeholder="请选择规则"
                option-filter-prop="children"
                style="width: 260px"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                v-decorator="[
                  'laborRules',
                  {
                    rules: [
                      {
                        required: false,
                        message: '请选择招工劳务费规则'
                      }
                    ]
                  }
                ]"
              >
                <a-select-option v-for="(item, index) in laborList" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <div style="display: flex; justify-content: space-between; padding: 0 15% 0 12%">
            <a-form-item style="min-width: 500px" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="审批模板">
              <div class="ellipsis" style="width: 260px" v-if="editor">{{ approFlowList ? approFlowList : "--" }}</div>
              <a-tree-select
                v-else
                style="width: 260px"
                :tree-data="approvalData"
                tree-checkable
                :replaceFields="replaceFields2"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                :filterTreeNode="false"
                @search="treeSearch2"
                placeholder="请选择审批模板"
                @change="treeSelectChange2"
                v-decorator="[
                  'approFlowInforList',
                  {
                    rules: [
                      {
                        required: false,
                        message: '请选择审批模板'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
            <a-form-item style="min-width: 500px" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="入职模板">
              <div class="ellipsis" style="width: 260px" v-if="editor">{{ onJobList ? onJobList : "--" }}</div>
              <a-select
                v-else
                allowClear
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                v-decorator="[
                  'onWorkList',
                  {
                    rules: [
                      {
                        required: false,
                        message: '请选择入职模板'
                      }
                    ]
                  }
                ]"
                style="width: 260px"
                option-filter-prop="children"
                show-search
                :filter-option="filterOption"
                placeholder="请选择模板"
              >
                <a-select-option :value="i.id" v-for="i in templateEntities" :key="i.id">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <div style="display: flex; justify-content: flex-start; padding: 0 15% 0 12%">
            <a-form-item style="min-width: 500px" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="待入职模板">
              <div class="ellipsis" style="width: 260px" v-if="editor">{{ waitJobList ? waitJobList : "--" }}</div>
              <a-select
                v-else
                allowClear
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                v-decorator="[
                  'waitWorkList',
                  {
                    rules: [
                      {
                        required: false,
                        message: '请选择待入职模板'
                      }
                    ]
                  }
                ]"
                style="width: 260px"
                option-filter-prop="children"
                show-search
                :filter-option="filterOption"
                placeholder="请选择模板"
              >
                <a-select-option :value="i.id" v-for="i in templateEntities2" :key="i.id">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </a-form>

        <div :class="`${isJF ? 'mt24' : ''}`" style="text-align: center">
          <a-button v-if="!disabled" type="primary" @click="saveData">{{ editor ? "确认" : "确认添加" }}</a-button>
        </div>
      </a-spin>
    </a-tab-pane>
    <a-tab-pane v-if="visibleFuwufankui && $route.query.id" key="服务反馈" tab="服务反馈">
      <Fuwufankui :companyId="$route.query.id" />
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import { TreeSelect } from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import { getCompanies, selectTreeBySubjectId, selectTreeByCompanyId, customTemplates } from "./api";
import { socProgListAll } from "@/api/shebao/shebaoMethod";
import { isContainByString } from "@/utils/index";
import { getSalaryCalculateRuleGroups } from "@/api/outsourcing/outrules";
import { getCategorieslistAll, sealListAllReq } from "@/api/company/contract";
import { getTemplates } from "@/api/wages/template";
import { mapGetters, mapState } from "vuex";
import { formatGroupTree, buildGroupTreeMap, fileListDecode, fileListEncode } from "@/utils/tools";
import FeeForm from "./aeu_fee.vue";
import ContractFrom from "./aeu_contact.vue";
import Fuwufankui from "../fuwufankui";
export default {
  name: "AddEmployment",
  components: { FeeForm, ContractFrom, Fuwufankui },
  data() {
    return {
      fileListTemp: [],
      feeFormValues: null,
      contractFormValues: null,
      spinning: false,
      wageList: [],
      laborList: [],
      laborRules: [],
      approvalData: [],
      templateEntities: [],
      templateEntities2: [],
      replaceFields: {
        children: "categoryListVOList",
        key: "id",
        value: "id",
        title: "name"
      },
      replaceFields2: {
        children: "approFlowVOList",
        key: "id",
        value: "id",
        title: "typeName"
      },
      category: "",
      seal: "",
      socProg: "",
      isContainByString,
      form: this.$form.createForm(this),
      formHigh: this.$form.createForm(this),
      // 编辑
      editor: false,
      disabled: false,
      salaryTemplate: "",
      copyDetail: {},
      isSeal: false,
      GJrules: [],
      LWFrules: [],
      onJobList: [],
      waitJobList: [],
      approFlowList: [],
      contractData: [],
      categoryIdList: [],
      name: "",
      detail: {
        name: ""
      },
      // false: 显示状态
      // true:  隐藏状态
      isShow: true,
      empList: [],
      wagesRules: [],
      companyId: this.$store.state.hr.companyId,
      // 参保方案数据
      socData: [],
      // 合同模板数据
      categoriesData: [],
      approvalDataList: [],
      contractList: [],
      // 月工资模板数据
      templateData: [],
      // 合同印章数据
      sealData: [],
      SHOW_PARENT,
      contractDefaultValue: []
    };
  },
  computed: {
    ...mapState(["site", "auth"]),
    visibleFuwufankui() {
      if (window.location.host === "sdwry.com") {
        return false;
      }
      return true;
    },
    isRequired() {
      if (window.location.host === "hr.qiyeyc.com" || window.location.host === "xingqitu.com") {
        return true;
      }
      if (this.auth.siteId === "01F52899496340DE82CD7AB3AE423EC1") {
        return true;
      }
      return false;
    },
    groupTree() {
      const tree = this.site.groupTree[0] ? formatGroupTree(this.site.groupTree[0].childList) : [];
      return tree;
    },
    groupTreeMap() {
      return this.site.groupTree[0] ? buildGroupTreeMap(this.site.groupTree[0].childList) : {};
    },
    ...mapGetters(["isJF"]),
    person() {
      return ["0-20", "20-99", "99-200", "200-500", "500-1000", "1000人以上"];
    },
    industry() {
      return [
        "互联网/信息技术",
        "教育行业",
        "制造业",
        "贸易/批发/零售",
        "房地产业",
        "建筑业",
        "金融业",
        "服务业",
        "社会组织",
        "科研服务",
        "公共/环境",
        "居民服务",
        "开采业",
        "农林牧渔",
        "电/热/燃气/水供应",
        "运输/物流/仓储",
        "文体/娱乐/传媒",
        "商业服务/租赁",
        "医疗医药",
        "政府/事业单位"
      ];
    }
  },
  watch: {
    contractDefaultValue(e) {
      if (e && !e.length) {
        this.isSeal = false;
      }
    },
    isRequired: {
      handler(newVal) {
        if (newVal) {
          this.isShow = false;
        }
      },
      immediate: true
    }
  },
  created() {
    this.selectTreeBySubjectId();
    this.getCategorieslistAll();
    this.socProgListAll();
    this.sealListAllReq();
    this.getTemplates();
    this.ruleList();
    this.selectTreeByCompanyId();
    this.issueTemplate();
  },
  mounted() {
    this.editor = this.disabled = !!this.$route.query.id;
    if (this.editor) {
      this.getCompanies();
      this.isShow = false;
    }
  },
  methods: {
    previewFile(file) {
      window.open(`${file.url}?token=${this.auth.token}`);
    },
    onUploadChange({ fileList }) {
      this.fileListTemp = fileList;
    },
    onGroupIdsChange(p1, p2, p3) {
      try {
        const node = p3.triggerNode.data.props;
        if (node.disabled) {
          setTimeout(() => {
            this.form.setFieldsValue({
              groupIds: p3.preValue
            });
          }, 0);
        }
      } catch (err) {
        console.log(err);
      }
    },
    issueTemplate() {
      const data = {
        type: 2,
        moduleCode: "onJob",
        "orders[0].property": "gmtCreate",
        "orders[0].desc": true
      };
      const data2 = {
        type: 2,
        moduleCode: "waitJob",
        "orders[0].property": "gmtCreate",
        "orders[0].desc": true
      };
      customTemplates(Object.assign(data, { pageNo: 1, pageSize: 999 }))
        .then((res) => {
          this.templateEntities = res.data.entities;
          this.templateEntities.forEach((item, index) => {
            if (item.name === "默认模板") {
              this.templateEntities.splice(index, 1);
            }
          });
          customTemplates(Object.assign(data2, { pageNo: 1, pageSize: 999 }))
            .then((res) => {
              this.templateEntities2 = res.data.entities;
              this.templateEntities2.forEach((item, index) => {
                if (item.name === "默认模板") {
                  this.templateEntities2.splice(index, 1);
                }
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    treeSearch2(e) {
      this.selectTreeByCompanyId(e);
    },
    selectTreeByCompanyId(e) {
      selectTreeByCompanyId({
        name: e || null,
        companyId: "0"
      })
        .then((res) => {
          const cJsonString = JSON.stringify(res.data);
          this.approvalData = JSON.parse(cJsonString.replaceAll("groupName", "typeName"));
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    treeSelectChange2(value, label, extra) {
      this.approvalDataList = [];
      this.approvalData.forEach((item) => {
        const categoryListVOList = item.approFlowVOList;
        if (categoryListVOList && categoryListVOList.length > 0) {
          item.approFlowVOList.forEach((itemItem) => {
            if (value.indexOf(itemItem.id) !== -1) {
              const itemObj = { groupName: item.typeName, approFlowId: "" };
              itemObj.approFlowId = itemItem.id;
              this.approvalDataList.push(itemObj);
            }
          });
        }
      });
    },
    ruleList() {
      getSalaryCalculateRuleGroups({
        companyId: "0",
        ruleType: 1,
        isShowPeopleNumber: true
      }).then((res) => {
        this.wageList = res.data;
        getSalaryCalculateRuleGroups({
          companyId: "0",
          ruleType: 2,
          isShowPeopleNumber: true
        }).then((res) => {
          this.laborList = res.data;
        });
      });
    },
    treeSelectChange(value, label, extra) {
      if (value && !value.length) {
        this.isSeal = false;
      }
      this.contractList = [];
      this.categoryNameList = [];
      this.contractData.forEach((item) => {
        const categoryListVOList = item.categoryListVOList;
        if (categoryListVOList && categoryListVOList.length > 0) {
          const itemObj = { contractGroupName: item.name, categoryIds: [] };
          item.categoryListVOList.forEach((itemItem) => {
            if (value.indexOf(itemItem.id) !== -1) {
              itemObj.categoryIds.push(itemItem.id);
            }
          });
          if (itemObj.categoryIds.length > 0) {
            this.contractList.push(itemObj);
          }
        }
      });
    },
    selectTreeBySubjectId() {
      selectTreeBySubjectId({
        subjectId: "0"
      })
        .then((res) => {
          const arr = [];
          res.data.forEach((e) => {
            if (e.isSystem) arr.push(String(e.id));
          });
          this.contractDefaultValue = [...arr];
          this.contractData = res.data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    // 获取详情
    getCompanies() {
      getCompanies(this.$route.query.id)
        .then((res) => {
          var salaryTemplateList = [];
          var sealList = [];
          var socProgList = [];
          var categoryList = [];

          this.feeFormValues = {
            saleRulesId: res.data.saleRebatesRules ? res.data.saleRebatesRules.id : null,
            saleUserList: res.data.companySaleUser
          };
          this.contractFormValues = res.data.companySaleServer;
          res.data.salaryTemplateList.forEach((item) => {
            salaryTemplateList.push(item.name);
            this.salaryTemplate = salaryTemplateList.join(",");
          });
          res.data.sealList.forEach((item) => {
            sealList.push(item.name);
            this.seal = sealList.join(",");
          });
          res.data.socProgList.forEach((item) => {
            socProgList.push(item.progName);
            this.socProg = socProgList.join(",");
          });
          res.data.categoryList.forEach((item) => {
            categoryList.push(item.name);
            this.category = categoryList.join(",");
          });
          res.data.salaryCalculateRuleGroupDOList.forEach((item) => {
            if (item.ruleType === 1) {
              this.GJrules.push(item.name);
            } else if (item.ruleType === 2) {
              this.LWFrules.push(item.name);
            }
          });
          this.GJrules = this.GJrules.join(",");
          this.LWFrules = this.LWFrules.join(",");
          res.data.customTemplateDOList.forEach((item) => {
            if (item.moduleCode === "onJob") {
              this.onJobList.push(item.name);
            } else if (item.moduleCode === "waitJob") {
              this.waitJobList.push(item.name);
            }
          });

          this.onJobList = this.onJobList.join(",");
          this.waitJobList = this.waitJobList.join(",");
          res.data.approFlowListVOList.forEach((item) => {
            this.approFlowList.push(item.typeName);
          });
          this.approFlowList = this.approFlowList.join(",");
          const data = res.data;

          this.copyDetail = { ...data };
          this.detail = data;
          this.fileListTemp = fileListEncode(data.serverAnnex);
          const da = {
            name: data.name,
            legalPerson: data.legalPerson,
            telephone: data.telephone,
            email: data.email,
            personSize: data.personSize,
            industry: data.industry,
            profile: data.profile,
            categoryIds: data.categoryIds,
            clientLevel: data.clientLevel,
            clientPhone: data.clientPhone,
            serverAnnex: this.fileListTemp,
            groupIds: data.groupIds.map((id) => this.groupTreeMap[id])
          };
          this.form.setFieldsValue(da);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },

    // 新增/修改
    saveData() {
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          Object.keys(values).forEach((key) => {
            this.detail[key] = values[key];
          });

          // 管理员已隐藏
          this.formHigh.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
              var salaryCalculateRuleGroupIdList = [];
              if (values.wagesRules && values.wagesRules.length) {
                salaryCalculateRuleGroupIdList = salaryCalculateRuleGroupIdList.concat(values.wagesRules);
              }
              if (values.laborRules && values.laborRules.length) {
                salaryCalculateRuleGroupIdList = salaryCalculateRuleGroupIdList.concat(values.laborRules);
              }
              var templateIds = [];
              if (values.onWorkList && values.onWorkList.length) {
                templateIds = templateIds.concat(values.onWorkList);
              }
              if (values.waitWorkList && values.waitWorkList.length) {
                templateIds = templateIds.concat(values.waitWorkList);
              }
              values.wagesRules = undefined;
              values.laborRules = undefined;
              values.onWorkList = undefined;
              values.waitWorkList = undefined;
              if (!this.editor) {
                values.approFlowInforList = this.approvalDataList;
                values.salaryCalculateRuleGroupIdList = JSON.parse(JSON.stringify(salaryCalculateRuleGroupIdList));
                values.templateIds = JSON.parse(JSON.stringify(templateIds));
              }

              this.detail = {
                ...this.detail,
                ...values,
                isSeal: this.isSeal
              };
              this.contractList = [];
              let types = null;
              if (this.contractDefaultValue.length > 0) {
                if (typeof this.contractDefaultValue[0] === "string") types = "string";
                if (typeof this.contractDefaultValue[0] === "number") types = "number";
              }
              this.contractData.forEach((item) => {
                const categoryListVOList = item.categoryListVOList;
                if (categoryListVOList && categoryListVOList.length > 0) {
                  const itemObj = { contractGroupName: item.name, categoryIds: [] };
                  if (this.contractDefaultValue.includes(types === "string" ? String(item.id) : item.id)) {
                    item.categoryListVOList.forEach((itemItem) => {
                      itemObj.categoryIds.push(itemItem.id);
                    });
                    if (itemObj.categoryIds.length > 0) {
                      this.contractList.push(itemObj);
                    }
                  } else {
                    item.categoryListVOList.forEach((itemItem) => {
                      if (this.contractDefaultValue.includes(types === "string" ? String(itemItem.id) : itemItem.id)) {
                        itemObj.categoryIds.push(itemItem.id);
                      }
                    });
                    if (itemObj.categoryIds.length > 0) {
                      this.contractList.push(itemObj);
                    }
                  }
                }
              });
              if (this.detail.serverAnnex) {
                this.detail.serverAnnex =
                  fileListDecode(this.detail.serverAnnex.fileList) || this.fileListTemp.map((item) => item.url).join(",");
              }
              this.detail.groupIds = this.detail.groupIds ? this.detail.groupIds.map((item) => item.value || item) : [];
              this.detail.categoryList = this.contractList;
              this.detail["companySaleServerList"] = this.$refs.ContractFrom.getValues();
              if (!this.detail["companySaleServerList"]) {
                return false;
              }
              const feeRes = await this.$refs.FeeForm.getValues();
              if (feeRes) {
                this.detail["saleRulesId"] = feeRes.saleRulesId;
                this.detail["saleUserList"] = feeRes.saleUserList;
              }
              this.spinning = true;
              if (this.editor) {
                this.$request({
                  method: "PUT",
                  url: `/hr/api/v1/companies`,
                  data: this.detail
                })
                  .then(async ({ success }) => {
                    this.spinning = false;
                    if (success) {
                      this.$notification["success"]({
                        message: "修改成功,返回页面"
                      });
                      await this.$store.dispatch("onCompanyListUpdate");
                      history.back();
                    }
                  })
                  .catch(() => {
                    this.spinning = false;
                  });
              } else {
                this.$request({
                  method: "POST",
                  url: `/hr/api/v1/companies`,
                  data: this.detail
                })
                  .then(async ({ success, data }) => {
                    this.spinning = false;
                    if (data.errorList && data.errorList.length > 0) {
                      this.$error({
                        title: "失败",
                        content: data.errorList.join(",") + "请前往公司设置自行下发",
                        onOk() {
                          history.back();
                        }
                      });
                    } else if (success) {
                      this.$notification["success"]({
                        message: "新增成功,返回页面"
                      });
                      await this.$store.dispatch("onCompanyListUpdate");
                      history.back();
                    }
                  })
                  .catch(() => {
                    this.spinning = false;
                  });
              }
            }
          });
        }
      });
    },
    // 删除账号
    deleteEmp() {
      this.$confirm({
        title: "确定删除该用工单位吗?",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          this.$request({
            method: "DELETE",
            url: `/hr/api/v1/companies/${this.$route.query.id}`
          }).then(async ({ success }) => {
            if (success) {
              this.$notification["success"]({ message: "删除成功,返回列表" });
              await this.$store.dispatch("onCompanyListUpdate");
              history.back();
            }
          });
        }
      });
    },
    // 账号角色
    handleChange(e) {},
    //  编辑
    editorDetail() {
      if (!this.disabled) {
        history.back();
      }
      this.disabled = !this.disabled;
    },
    // 获取参保方案
    socProgListAll() {
      const data = {
        // companyId: this.isContainByString("contractAdmin")
        //   ? "0"
        //   : this.companyId
        companyId: "0"
      };
      socProgListAll(data)
        .then((res) => {
          this.socData = res.data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    // 获取合同模板
    getCategorieslistAll() {
      getCategorieslistAll({
        valid: true,
        // subjectId: this.isContainByString("contractAdmin")
        //   ? "0"
        //   : this.companyId
        subjectId: "0"
      })
        .then((res) => {
          this.categoriesData = res.data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    // 获取工资模板
    getTemplates() {
      getTemplates({ companyId: "0" })
        .then((res) => {
          this.templateData = res.data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    // 获取合同印章
    sealListAllReq() {
      sealListAllReq({
        subjectId: "0"
      })
        .then((res) => {
          this.sealData = res.data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    formatAreaValue(val) {
      if (Array.isArray(val)) {
        return val.join(",");
      }
      return val;
    }
  }
};
</script>
<style lang="scss" scoped>
.ellipsis {
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
  word-wrap: break-word;
}
.body_detail {
  padding: 24px;
  .company {
    color: #333333;
    font-size: 16px;
    // margin: 20px 0;
  }
  .base_detail {
    height: 48px;
    line-height: 48px;
    padding-left: 24px;
    margin: 20px 0;
    background: #f4f6fa;
    border-radius: 4px;
  }

  .font-14px-3333 {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
  }
  .but-open-show {
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d7d7d7;
    display: inline;
    padding: 8px 15px;
    cursor: pointer;
    text-align: center;
  }
}
</style>
